<!-- 券专区商品列表 -->
<template>
	<view class="container">
		<view class="listBox">
			<empty v-if="empty" :custom="true" src="/mall/static/images/no-goods.png" text="无相关商品"></empty>
			<goods-block :goodsList="goodsList" :ticket="true" :scrollTop="scrollTop"></goods-block>
			<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty/empty";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import goodsBlock from "@/components/goodsBlock/goodsBlock.vue"
	import {
		ticketShopList
	} from "@/api/mall.js"
	export default {
		components: {
			uniLoadMore,
			goodsBlock,
			empty
		},
		data() {
			return {
				empty: false,
				item: {},
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				keyword: '',
				cid: -1,
				page: 1,
				limit: 10,
				goodsList: [],
				scrollTop: 0
			}
		},
		onLoad(option) {
			if (option.cate) {
				let cate = JSON.parse(decodeURIComponent(option.cate))
				this.cid = cate.cate_id
				uni.setNavigationBarTitle({
					title: cate.cate_name
				})
			}
			if (option.keyword) {
				this.keyword = option.keyword
				uni.setNavigationBarTitle({
					title: option.keyword
				})
			}
			this.loadData()
		},
		onPageScroll(e) {
			 this.scrollTop = e.scrollTop;
		},
		//加载更多
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.loadData();
		},
		methods: {
			loadData() {
				ticketShopList({
					page: this.page,
					limit: this.limit,
					search_str: this.keyword,
					cate_id: this.cid
				}).then(res => {
					this.loadStatus = "more";
					this.goodsList.push.apply(this.goodsList, res.data);
					if (res.data.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.goodsList.length == 0) {
						this.empty = true
						this.contentText.contentnomore = ''
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.container {
		.listBox{
			padding: 20rpx 30rpx 0;
		}
	}
</style>
